<template>
  <section id="checkCodePage">
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="userName" label="用户名">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号">
      </el-table-column>
      <el-table-column prop="checkCode" label="验证码">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间">
      </el-table-column>
      <el-table-column  label="操作">
        <template  slot-scope="scope">
          <el-button type="primary" size="mini" @click="uploadCheck(scope.row.id)">提交验证码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="6" :offset="18">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNumber"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </section>

</template>

<script>
  import dateformat from 'dateformat'
  export default {
    data () {
      return {
        tableData: [],
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        loading: false
      }
    },
    created() {
      this.getCheckCode()
    },
    methods: {
      getCheckCode() {
        this.loading = true
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getphoneCheckCode(params).then(res => {
          this.tableData = res.data.list;
          this.total = res.data.totalRow;
          this.$message.success('获取验证码列表成功');
          this.loading = false;
          this.tableData.forEach(item =>{
            if (item.createDate) {
              let date = new Date(item.createDate);
              item.createDate = dateformat(date, 'yyyy-mm-dd HH:MM')
            }
          })
        })
      },
      uploadCheck(id){
        this.$prompt('请输入验证码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          if(!value){
            this.$message.info('请输入验证码')
          }else{
            let params ={
             id:id,
              checkCode: value
            }
            this.$api.savePhoneCheckCode(params).then(res=>{
              this.$message({
                type: 'success',
                message: '提交验证码成功'
              });
              this.getCheckCode()
            })

          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消提交'
          });
        });

      },
      handleCurrentChange(val){
        this.pageNumber = val
        this.getCheckCode()
      }
    }


  }
</script>

<style lang="less">
  #checkCodePage{
    padding:40px 10px;
    th {
      text-align: center;
    }
  }
</style>
